<template>
	<div class="bookshelf">
		<!-- nav开始   小说列表页-->
		<van-sticky :offset-top="0" >
		<div class="nav">
			<van-icon name="manager-o" size='20' class="leftnav" @click="set_up()"  />
			<van-search v-model="value" placeholder="请输入搜索关键词" input-align="center"  />
			<van-icon name="wap-nav" size="20" class="righnav" />
		</div>
		</van-sticky>
		<!-- nav结束 -->

		<!-- 列表-start -->
		<!-- <van-card tag="完结" title="高考落榜:神豪从千万超跑开始" price='2021-2-28 更新:540章:目标,星辰大海' desc="东方清流水|未读"
			thumb='https://img01.yzcdn.cn/vant/ipad.jpeg' centered /> -->
		<div v-for='(item,index) in booklist' :key='item._id' @click="Novel(item)">
			<van-card tag="完结" :title='item.title' :price="'更新:'+item.lastChapter" :desc="item.author"
				:thumb='item.cover' centered />

		</div>
		<!-- 列表-end -->

	</div>

</template>

<script>
	
	import {Toast} from 'vant';
	
	export default {
		name: 'bookshelf',
		data() {
			return {
				value: '', //搜索

				booklist: [
					//追书神器api模板
					{
						_id: '',
						title: '', //标题
						author: '', //作者
						lastChapter: '', //最新章节
						cover: '', //图片地址需要解析
						allowMonthly: '',
						banned: '',
						contentType: '',
						latelyFollower: '',
						majorCate: '', //大分类
						minorCate: '', //小分类
						retentionRatio: '',
						shortIntro: '', //小说描述
						site: '',
						sizetype: '',
						superscript: '',
					}
				]
			}
		},
		//
		comments: {

		},
		//页面加载调用
		created() {
			this.getlist();
		},
		//函数方法-start
		methods: {
			//点击跳转设置页
			set_up() {
				this.$router.push({
						name:'set_up',
						params: {

						}
					})
			},

			//小说详情页
			Novel(item) {
				//查看详情小说
				this.$router.push({
					name: 'Novel_details_page',
					params: {
							
					}
				})
			},
			//axios
			//1. 获取排行榜小说
			getlist() {
				//var url='/ranking/564eb878efe5b8e745508fde';
				var url = '/book/by-categories?gender=male&type=hot&major=都市&minor=&start=2&limit=100'
				this.$http.get('/api/' + url).then(res => {
					this.booklist = res.data.books;
					//decodeURIComponent(a)解码图片地址,并截取正确地址
					for (var i = 0; i < res.data.books.length; i++) {
						this.booklist[i].cover = decodeURIComponent(res.data.books[i].cover).split('/agent/')[1]
					}
				}).catch(err => { //错误返回
					alert(err)
				})

			}
		}
		//函数方法-end
		//
	}
</script>

<style>
	.nav {
		height: 3.125rem;
		display: flex;
		flex-direction: row;
		justify-content: center;
background-color: #fff;
	}

	.bookshelf {

		margin-bottom: 50px;
	}

	.leftnav {
		align-self: center;
	}

	.righnav {
		align-self: center;
	}

	.van-card__price-integer {
		font-size: 12px;
	}
</style>
